<template>
	<view class="SRV-topbar" :style="'background: ' + background + ';background-size: 100% auto;'">
		<view class="topbar-fixed" :style="'background: ' + background + ';background-size: 100% auto;'">
			
			<view class="backbox" v-if="!MenuShow" @tap="backFan" >
				<view class="leftbtn">
					<uni-icons type="back" size="22" color="#000"/> 
				</view>
			</view>
			
			<view class="menu" v-if="MenuShow">
				
				
				<view class="menubtn" @tap="open">
					<uni-icons type="bars" size="22" color="#000" />
					<uni-icons type="back" size="12" color="#666" style="transform: rotate(270deg);" />  
				</view>
				
				<view class="line"/>
				
				<view class="homebtn" @click="jump('index','')">
					<uni-icons type="home" size="22" color="#000" /> 
				</view> 
				
				 <view class="searchbtn" @click="jump('search','')"> 
					<uni-icons type="search" size="18" color="#ccc" />
				</view>
				
				<view class="line"/>
				
				<view class="closeiconbox" @tap="MenuShowFan()"> 
				
				<uni-icons type="clear" size="10" color="#fff" />
				<!-- <view class="closeicon"  style="transform: rotate(45deg);"/> -->
				</view>
				
			</view>
			
			
			<view class="title" @tap="MenuShowFan()" v-if="!MenuShow">
			<text>{{title}}</text>
			<uni-icons type="back" size="12" color="#666" /> 
			</view>
			
		</view>
		
		<uni-popup ref="menupopup" type="top">
			<view class="popmenu"> 
				<view class="pop-item" @tap="getScancode">
					<uni-icons type="scan" size="15" color="#000" />
					<text>扫码</text>
				</view>
				
				
				<view class="pop-item" @click="jump('course_list','')">
					<uni-icons type="headphones" size="15" color="#000" />
					<text>课堂</text>
				</view>
				
				<view class="pop-item" @click="jump('activity_index','')">
					<uni-icons type="heart" size="15" color="#000" />
					<text>活动</text>
				</view>
				
				<view class="pop-item" @click="jump('store','')">
					<uni-icons type="cart" size="15" color="#000" />
					<text>购物</text>
				</view>
				
				<view class="pop-item" @click="jump('activity_album_list','')">
					<uni-icons type="images" size="15" color="#000" />
					<text>相册</text>
				</view>
				
				<view class="pop-item" @click="jump('dynamic','pages/my/volunteer')">
					<uni-icons type="chat" size="15" color="#000" />
					<text>圈儿</text>
				</view>
				
				<view class="pop-item" @click="jump('my','')">
					<uni-icons type="person" size="15" color="#000" />
					<text>我的</text>
				</view>
				
			</view>
		</uni-popup>
		
	</view>
	
	
</template>

<script>
	import common from '@/static/jump.js';
	export default {
		name:"SRV-topbar",
		data() {
			return {
				MenuShow: false,
				Pagecount:0,
				popopen:false
			}
		},		
		props: {
			title: {
				// 页面标题文字
				type: String,
				default: "小黄人急救"
			}, 
			
			background:{
				// 顶部菜单背景
				type: String,
				default: "#ffd900"
			},
			
			// Pagecount:{
			// 	type: [Number, String],
			// 	default: 1
			// },
			
			Ishome:{ //是否显示主页按钮
				type:[Boolean, String],
				default: true
			},
			
			Isback:{ //是否显示后退按钮
				type: Boolean,
				default: true
			},
			
			Ismenu:{//是否显示更多菜单按钮
				type: Boolean,
				default: true
				
			}
		},
		methods: {
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			},
			getScancode: function() {
				var self = this;
				// 允许从相机和相册扫码
				wx.scanCode({
					success: (res) => {
						var result = res.result;
						uni.redirectTo({
							url: '/pages/index/scancode?link=' + Base64.encode(result)
						});
						return;
					}
				})
			},
			MenuShowFan(){
				if(this.MenuShow){
					this.MenuShow=false;
					this.close();
				}else{
					this.MenuShow=true;
				}
			},
			
			backFan(){
				var Pagecount = getCurrentPages().length;  
				if(Pagecount>1){
					this.jump('return_one','')
				}else{
					this.jump('index','')
				}
				
			},
			
			
			
			open() {
				if(this.popopen){
					this.$refs.menupopup.close();
					this.popopen=false;
				}else{
					this.$refs.menupopup.open();  
					this.popopen=true;
				}
				
			},
			close(){
				this.$refs.menupopup.close();
				this.popopen=false;
			}
			
			
		
		},
		onLoad() {
			
		}
	}
</script>

<style scoped lang="scss">
	.SRV-topbar{ 
		width: 100%;
		height: 160upx;
		//background-color: #ffd900;
		background-size: 100% auto;
		//background-position: 0upx -160upx;
		//background-position: left top;
		//background-repeat: no-repeat;
		//position: absolute;
		//top:-200upx;
	
		
		.topbar-fixed{
			width: 100%;
			height: 160upx;
			
			display: flex;
			flex-direction:row;
			
			position: fixed;
			top: 0upx;
			z-index: 999;
			
			box-sizing: border-box;
			//justify-content: space-between;
			align-items: center;
			//background-color: #ff0000;
			background-size: 100% auto;
			//background-position: 0upx -160upx;
			//background-position: left top;
			//background-repeat: no-repeat;
			
			.backbox{
				width: 80upx;
				height: 80upx;
				margin-top: 80upx; 
				padding-left: 20upx;
				//background-color: #ccc;
			}
			
			.leftbtn{
				width: 40upx;
				height: 40upx;
				margin-top: 20upx; 
				//background-color: #ff0000;
			}
			
			.menu{
				width: 750upx;
				height: 60upx;
				margin-top: 70upx;
				//margin-left: 20upx;
				padding: 3upx 30upx;
				
				border-radius: 0 32upx 32upx 0;
				//border: #fff 1upx solid;
				//background-color: rgba(#fff,0.5);
				//box-shadow: 0upx 0upx 5upx 0upx rgba(#ccc,0.8);
				
				display: flex;
				flex-direction:row;
				//justify-content: space-between;
				//align-content: center;
				align-items: center;
				
				.menubtn{
					display: flex;
					flex-direction:row;
					align-items: center;
					//margin-right: 15upx;
				}
				
				.homebtn{
					margin: 0upx 5upx;
				}
				
				.line{
					width: 2upx;
					height: 20upx;
					margin: 0upx 15upx;
					background-color: #fff;
					
				}
				
				
				
				.searchbtn{
					width: 150upx;
					height: 45upx;
					padding: 3upx 15upx;
					margin: 0upx 15upx;
					
					border-radius: 25upx;
					border: #ccc 1upx solid;
					background-color: #fff;
					
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
				}
				
				.closeiconbox{
					width: 45upx;
					height: 45upx;
					//background-color: #ff0000;
					//padding: 10upx 20upx;
					padding-bottom: 8upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.closeicon{
					width: 12upx;
					height: 12upx;
					margin: 6upx;
					border-left: #666 3upx solid;
					border-top: #666 3upx solid;
				}
				
			}
			
			.title{
				width: 390upx;
				height: 70upx;
				overflow: hidden;
				
				//margin-top: 100upx;
				//margin-right: 220upx;
				position: absolute;
				top:100upx;
				left:180upx;
							
				//border: 1upx #ff0000 dashed;
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				align-content: center;
				
				
				
				
				text{
					height: 32upx;
					text-align: center;
					font-size: 30upx;
					line-height: 32upx;
					font-weight: bold;
					overflow: hidden;
					color: #000;
					
					text-overflow: -o-ellipsis-lastline;
					
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					
				}
				
				uni-icons{
					margin-top: -10upx;
					transform: rotate(270deg);
				}
			}
			
			
			.moremove{
				top:159upx;
				transform:scale(1,1);
				-webkit-animation: mymove 0.3s ; /* Chrome, Safari, Opera */
				animation: mymove 0.3s ;
			}
			@keyframes mymove{
				0% {
					top: 59upx;
					transform:scale(0,0);
				}
			100% {
				top: 159upx;
				transform:scale(1,1);
				}
			}
			
			.moreremove{
				top: 59upx;
				transform:scale(0,0);
				-webkit-animation: remove 0.3s ; /* Chrome, Safari, Opera */
				animation: remove 0.3s ;
			}
			@keyframes remove{ 
				0%{
					top: 159upx;
					transform:scale(1,1);
				}
				
				100%{
					top: 59upx;
					transform:scale(0,0);
					}
				
			}
			
			
			
		}
		
		.popmenu{
			width: 250upx;
			height: 100vh;
			min-height: 100vh;
			//padding: 10upx;
			
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items:flex-start;
			
			position: fixed;
			top:159upx;
			left:0upx;
			background: rgba(#fff, 0.9);
			border-radius: 0 0 30upx 30upx;
			
			.pop-item{
				width: 250upx;
				height: 60upx;
				padding: 10upx 0;
				//margin: 20upx;
				
				border-bottom: #ccc 1upx solid;
				
				text{
					width: 100upx;
					font-size: 26upx;
					color: #333;
					line-height: 50upx;
					//margin-left: 10upx;
					//border-bottom: #ccc 2upx solid;
				}
				
				uni-icons{
					width: 60upx;
					height: 60upx;
					margin: 0 30upx;
					border-radius: 22upx;
					background-color: #ffd900;
					color: #000;
				}
			}
		}
		
	}
	
	
</style>